<html>
<head>
    <meta charset="UTF-8">
    <title>NexMagic Scholar</title>
    <style type="text/css">
        html, body {
            height: 100%;
            overflow: hidden;
        }
        .node circle {
            cursor: pointer;
            fill: #fff;
            stroke: steelblue;
            stroke-width: 1.5px;
        }

        .node text {
            font-size: 11px;
        }

        path.link {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;
        }

        rect {
            fill: none;
            pointer-events: all;
        }

        pre {
            font-size: 18px;
        }

        line {
            stroke: #000;
            stroke-width: 1.5px;
        }

        a:link, a:visited {
            color: #000;
            text-decoration: none;
        }

        a:hover {
            color: #666;
        }

/*        svg {
            transform: translate(150px);
        }*/
        #body {
            overflow: hidden;
        }

        text.children {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="body">
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/d3/d3.v3.min.js"></script>
<script type="text/javascript" src="../js/d3/d3.layout.js"></script>
<script type="text/javascript" src="../js/gAjax.js"></script>
<script type="text/javascript">
    $(document).on("click", "text.children", function (event) {/*d3,父子领域树状图 text点击事件监听*/
        parent.queryExpertsMyself($(this).text());
    });

    var keyword = getStorage("scholar_searchKeyword");
    //var keyword = "machine learning";
    var data = {
        name: keyword,
        children: [{
            name: "parents",
            children: []
        }, {
            name: "children",
            children: []
        }]
    };
    gAjax.request("/neo4j/field/getFields", {name: keyword}).then(function (result) {
        result.forEach(function (item) {
            var index = item["type"] == "child" ? 1 : 0;
            data.children[index].children.push({
                name: item["f1.name"]
            });
        });

        var childrenArr = data.children[1].children;
        var childNum = childrenArr.length;
        if (childNum > 30) {
            data.children.splice(1, 1);
            var groupNum = Math.ceil(childNum / 30); // 每30个子类一组，进一运算

            for (var i = 0; i < groupNum; i++) {
                var startIndex = i * 30 + 1;
                var endIndex = i == groupNum - 1 ? childNum : (i + 1) * 30;
                data.children.push({
                    name: "children[" + startIndex + ", " + endIndex + "]",
                    children: childrenArr.slice(startIndex - 1, endIndex - 1)
                })
            }
        }

        console.log(groupNum);
        data.x0 = h / 2;
        data.y0 = 0;
        // 初始化显示些许节点
        data.children.forEach(function toggleAll(d) {
            if (d.children) {
                d.children.forEach(toggleAll);
                toggle(d);
            }
        });
        toggle(data.children[0]);
        toggle(data.children[1]);
        update(data);
        console.log(data);
    });

    var m = [20, 120, 20, 120],
        w = 1280 - m[1] - m[3],
        h = 800 - m[0] - m[2],
        i = 0;

    var tree = d3.layout.tree()
        .size([h, w]);

    var diagonal = d3.svg.diagonal()
        .projection(function (d) {
            return [d.y, d.x];
        });
    // 缩放
    var zoom = d3.behavior.zoom()
        .scaleExtent([1, 10])
        .on("zoom", zoomed);

    function zoomed() {
        vis.attr("transform",
            "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }

    var vis = d3.select("#body").append("svg")
        .attr("width", $("body").width())
        .attr("height", $("body").height())
        .call(zoom)
        .append("g")
        //.attr("style", "margin-left: 300px;");
        .attr("transform", "translate(" + m[3] + "," + m[0] + ")");


    function update(source) {
        var duration = d3.event && d3.event.altKey ? 5000 : 500;

        // Compute the new tree layout.
        var nodes = tree.nodes(data).reverse();

        // Normalize for fixed-depth.
        nodes.forEach(function (d) {
            d.y = d.depth * 380;
        });

        // Update the nodes…
        var node = vis.selectAll("g.node")
            .data(nodes, function (d) {
                return d.id || (d.id = ++i);
            });

        // Enter any new nodes at the parent's previous position.
        var nodeEnter = node.enter().append("svg:g")
            .attr("class", "node")
            .attr("transform", function (d) {
                return "translate(" + source.y0 + "," + source.x0 + ")";
            })
            .on("click", function (d) {
                toggle(d);
                update(d);
            });

        nodeEnter.append("svg:circle")
            .attr("r", 1e-100)
            .style("fill", function (d) {
                return d._children ? "lightsteelblue" : "#fff";
            });

        nodeEnter.append("svg:text")
            .attr("x", function (d) {
                return d.children || d._children ? -8 : 8;
            })
            .attr("dy", ".35em")
            .attr("class", function (d) {
                return d.children ? "" : "children"
            })
            .attr("text-anchor", function (d) {
                return d.children || d._children ? "end" : "start";
            })
            .style("cursor", "pointer")
            .text(function (d) {
                return d.name;
            })
            .style("fill-opacity", 1e-6);

        // Transition nodes to their new position.
        var nodeUpdate = node.transition()
            .duration(duration)
            .attr("transform", function (d) {
                return "translate(" + d.y + "," + d.x + ")";
            });

        nodeUpdate.select("circle")
            .attr("r", 4)
            .style("fill", function (d) {
                return d._children ? "lightsteelblue" : "#fff";
            });

        nodeUpdate.select("text")
            .style("fill-opacity", 1);

        // Transition exiting nodes to the parent's new position.
        var nodeExit = node.exit().transition()
            .duration(duration)
            .attr("transform", function (d) {
                return "translate(" + source.y + "," + source.x + ")";
            })
            .remove();

        nodeExit.select("circle")
            .attr("r", 1e-6);

        nodeExit.select("text")
            .style("fill-opacity", 1e-6);

        // Update the links…
        var link = vis.selectAll("path.link")
            .data(tree.links(nodes), function (d) {
                return d.target.id;
            });

        // Enter any new links at the parent's previous position.
        link.enter().insert("svg:path", "g")
            .attr("class", "link")
            .attr("d", function (d) {
                var o = {x: source.x0, y: source.y0};
                return diagonal({source: o, target: o});
            })
            .transition()
            .duration(duration)
            .attr("d", diagonal);

        // Transition links to their new position.
        link.transition()
            .duration(duration)
            .attr("d", diagonal);

        // Transition exiting nodes to the parent's new position.
        link.exit().transition()
            .duration(duration)
            .attr("d", function (d) {
                var o = {x: source.x, y: source.y};
                return diagonal({source: o, target: o});
            })
            .remove();

        // Stash the old positions for transition.
        nodes.forEach(function (d) {
            d.x0 = d.x;
            d.y0 = d.y;
        });
    }

    // Toggle children.
    function toggle(d) { // _children,children内容互换（本质控制默认是否显示）
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else {
            d.children = d._children;
            d._children = null;
        }
    }
</script>
</body>
</html>